var num = 3, tempNum = 1;
var height_percent = 80;

$(document).ready(function() {
    setInterval(function() {
        tempNum++;
        if (tempNum%num == 0) {
            $(".bar-content").animate({left: "0px"});
        } else {
            $(".bar-content").animate({left: -100*(tempNum%num)+"%"}, "slow");
        }
    }, 3500);

    $("#next").click(function() {
        tempNum++;
        if (tempNum%num == 0) {
            $(".bar-content").animate({left: "0px"});
        } else {
            $(".bar-content").animate({left: -100*(tempNum%num)+"%"}, "slow");
        }
    });

    $("#previous").click(function() {
        tempNum--;
        if (tempNum < 0) {
        	tempNum = 2;
        	$(".bar-content").animate({left: -100*(tempNum)+"%"}, "slow");
        } else {
        	if (tempNum%num == 0) {
                $(".bar-content").animate({left: "0px"});
            } else if (tempNum%num > 0){
                $(".bar-content").animate({left: -100*(tempNum%num)+"%"}, "slow");
            }
        }
    });
    
    $(".scroll-bar").css("height", ($(window).height()*0.01*height_percent)+"px");
    
    $(window).resize(function() {
    	$(".scroll-bar").css("height", ($(window).height()*0.01*height_percent)+"px");
    });
});
